<template>
  <div>
    <h3>个人信息</h3>
    <el-form :model="userInfo" label-width="100px">
      <!-- 参保人ID -->
      <el-form-item label="身份证号/ID">
        <el-input v-model="userInfo.insuredpersonid" disabled></el-input>
      </el-form-item>

      <!-- 姓名 -->
      <el-form-item label="姓名">
        <el-input v-model="userInfo.name" :disabled="!isEditingName"></el-input>
        <el-button type="danger" @click="toggleEdit('name')">{{ isEditingName ? '保存' : '修改' }}</el-button>
      </el-form-item>

      <!-- 性别 -->
      <el-form-item label="性别">
        <el-input v-model="userInfo.gender" :disabled="!isEditingGender"></el-input>
        <el-button type="danger" @click="toggleEdit('gender')">{{ isEditingGender ? '保存' : '修改' }}</el-button>
      </el-form-item>

      <!-- 家庭住址 -->
      <el-form-item label="家庭住址">
        <el-input v-model="userInfo.address" :disabled="!isEditingAddress"></el-input>
        <el-button type="danger" @click="toggleEdit('address')">{{ isEditingAddress ? '保存' : '修改' }}</el-button>
      </el-form-item>

      <!-- 联系电话 -->
      <el-form-item label="联系电话">
        <el-input v-model="userInfo.contactnumber" :disabled="!isEditingContactNumber"></el-input>
        <el-button type="danger" @click="toggleEdit('contactNumber')">{{ isEditingContactNumber ? '保存' : '修改' }}</el-button>
      </el-form-item>

      <!-- 参保状态 -->
      <el-form-item label="参保状态">
        <el-input v-model="userInfo.insurancestatus" disabled></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {

  data() {
    return {
      userInfo: {
        insuredpersonid: '',
        name: '',
        gender: '',
        address: '',
        contactnumber: '',
        insurancestatus: ''
      },
      isEditingName: false,
      isEditingGender: false,
      isEditingAddress: false,
      isEditingContactNumber: false,
    };
  },
  mounted() {
    console.log('通过 $route.params 获取的用户名:', this.$route.params.username);
    this.fetchUserInfo();
  },
  methods: {
    fetchUserInfo() {


      axios.get(`http://localhost:8081/insuredPerson/get/${this.$route.params.username}`)
          .then(response => {
            this.userInfo = response.data;
          })
          .catch(error => {
            console.error('获取用户信息失败:', error);
          });
    },
    toggleEdit(field) {
      switch (field) {
        case 'name':
          if (this.isEditingName) {
            // 保存逻辑
            this.saveUserInfo('name');
          }
          this.isEditingName = !this.isEditingName;
          break;
        case 'gender':
          if (this.isEditingGender) {
            this.saveUserInfo('gender');
          }
          this.isEditingGender = !this.isEditingGender;
          break;
        case 'address':
          if (this.isEditingAddress) {
            this.saveUserInfo('address');
          }
          this.isEditingAddress = !this.isEditingAddress;
          break;
        case 'contactNumber':
          if (this.isEditingContactNumber) {
            this.saveUserInfo('contactNumber');
          }
          this.isEditingContactNumber = !this.isEditingContactNumber;
          break;
      }
    },
    saveUserInfo(field) {
      // 这里可以添加保存用户信息的逻辑
      const username = this.$route.params.username; // 获取用户名
      axios.put(`http://localhost:8081/insuredPerson/update/${username}`, {
        [field]: this.userInfo[field]
      })
          .then(response => {
            this.$message.success('保存成功');
          })
          .catch(error => {
            console.error('保存失败:', error);
            this.$message.error('保存失败，请重试');
          });
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>
